<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑服务配置' : '新增服务配置'"
    width="600px"
    @close="resetForm"
  >
    <el-form ref="serviceForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="服务代码" prop="standardCode">
        <el-input v-model="form.standardCode" placeholder="请输入服务代码" />
      </el-form-item>
      <el-form-item label="默认价格" prop="costScore">
        <el-input-number
          v-model="form.costScore"
          :min="0"
          placeholder="请输入默认价格"
        />
      </el-form-item>
      <el-form-item label="API提供商" prop="apiProvider">
        <el-input v-model="form.apiProvider" placeholder="请输入API提供商" />
      </el-form-item>
      <el-form-item label="API名称" prop="apiName">
        <el-input v-model="form.apiName" placeholder="请输入API名称" />
      </el-form-item>
      <el-form-item label="适配器类型" prop="adapterType">
        <el-input v-model="form.adapterType" placeholder="请输入适配器类型" />
      </el-form-item>
      <el-form-item label="任务类型" prop="taskType">
        <el-input v-model="form.taskType" placeholder="请输入任务类型" />
      </el-form-item>
      <el-form-item label="输入文件类型" prop="inputDataType">
        <el-select
          v-model="form.inputDataType"
          placeholder="请选择输入文件类型"
        >
          <el-option label="phone" value="phone" />
          <el-option label="email" value="email" />
        </el-select>
      </el-form-item>
      <el-form-item label="图片地址" prop="image">
        <el-input v-model="form.image" placeholder="请输入图片地址" />
      </el-form-item>
      <el-form-item label="启用" prop="isActive">
        <el-switch v-model="form.isActive" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 8 }"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleConfirm"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  createServiceConfig,
  updateServiceConfig
} from "@/api/adminThirdPartyApi";
import { message } from "@/utils/message";
// 控制对话框显示状态
const dialogVisible = ref(false);

// 表单数据，id 为 0 表示新增，非 0 表示编辑
const id = ref("");
const form = ref({
  standardCode: "",
  apiProvider: "",
  apiName: "",
  adapterType: "",
  taskType: "",
  costScore: 0,
  isActive: true,
  remark: "",
  name: "",
  image: "",
  inputDataType: "phone"
});
const emits = defineEmits(["refresh"]);

// 基础校验规则
const rules = {
  standardCode: [
    { required: true, message: "请输入服务代码", trigger: "blur" }
  ],
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  apiProvider: [
    { required: true, message: "请输入API提供商", trigger: "blur" }
  ],
  costScore: [
    {
      type: "number",
      required: true,
      message: "请输入价格",
      trigger: "change"
    }
  ],
  apiName: [{ required: true, message: "请输入API名称", trigger: "blur" }],
  adapterType: [
    { required: true, message: "请输入适配器类型", trigger: "blur" }
  ],
  taskType: [{ required: true, message: "请输入任务类型", trigger: "blur" }],
  inputDataType: [
    { required: true, message: "请选择输入文件类型", trigger: "change" }
  ]
};

const serviceForm = ref(null);
// 重置表单
const resetForm = () => {
  id.value = "";
  serviceForm.value?.resetFields();
};

// 通过 id 判断是编辑还是新增
const isEdit = computed(() => id.value);
const submitLoading = ref(false);
const handleConfirm = () => {
  serviceForm.value.validate(async valid => {
    if (valid) {
      try {
        submitLoading.value = true;
        if (isEdit.value) {
          // 编辑逻辑处理
          await updateServiceConfig(id.value, form.value);
          message("更新成功！", { type: "success" });
        } else {
          await createServiceConfig(form.value);
          // 新增逻辑处理
          message("新增成功！", { type: "success" });
        }
        emits("refresh");
        dialogVisible.value = false;
      } finally {
        submitLoading.value = false;
      }
    } else {
      console.log("表单校验失败");
      return false;
    }
  });
};
const open = row => {
  if (row) {
    for (let key in form.value) {
      form.value[key] = row[key];
    }
    id.value = row?.id || "";
  }
  dialogVisible.value = true;
};
defineExpose({
  open
});
</script>
